/**
 * 不 无缝 轮播
 * @authors Your Name (you@example.org)
 * @date    2018-04-16 21:39:02
 * @version $Id$
 */
var $banner = $("#banner1"),
	$pic = $banner.find(".pic ul li"),
	$tab = $banner.find(".tab ul li"),
	$btn = $banner.find(".btn div"),
	length = $pic.length,
	index = 0;

<!-- 初始显示 -->
$banner[0].onselectstart = function(){
	return false;
}
var $picUl = $pic.parent(),
	width = $pic.width();
$picUl.width((length+10)*width).parent().css({overflow:"hidden"});
$pic.css({
	position:"static",
	width:width,
	float:"left"
});
$tab.eq(0).addClass("on");

<!-- tab -->
$tab.click(function(){
	var x = index;
	if(x !== $(this).index()){
		change($(this).index());
	}
});

<!-- btn -->
$btn.click(function(){
	var x = index;
	if($(this).index()){
		x++;
		x %= length;
	}else{
		x--;
		x = x<0?length-1:x;
	}
	change(x);
});

<!-- 自动轮播 -->
$banner.hover(function(){
	clearInterval(tabTime);
},run());
function run(){
	tabTime = setInterval(function (){
		var x = index;
		x++;
		x %= length;
		change(x);
	},3000);
	return run;
}

<!-- 变化函数 -->
function change(i){
	$tab.eq(index).removeClass('on');
	index = i;
	$picUl.stop().animate({
		marginLeft : -index*width
	},500);
	$tab.eq(index).addClass('on');
}
